<template>
    <div class="terrace_role_detail">
        <div class="role_detail_block flex flexR">
            <div class="left">
                <span v-if="type > 0">*</span>角色名称:
            </div>
            <div class="right">
                <div v-if="type === 0"> {{role_name}} </div>
                <el-input v-if="type > 0" type="text" clearable placeholder="角色名称"  v-model="role_name"></el-input>
            </div>
        </div>
        <div class="role_detail_block flex flexR">
            <div class="left">
                状态:
            </div>
            <div class="right">
                <el-radio v-model="status" :label="0" aria-checked="{checked: 1==1}" :disabled="type == 0">启用</el-radio>
                <el-radio v-model="status" :label="1" :disabled="type == 0">禁用</el-radio>
            </div>
        </div>
        <div class="role_detail_block flex flexR">
            <div class="left">
                备注:
            </div>
            <div class="right">
                <div v-if="type === 0"> {{remark}} </div>
                <el-input
                    v-if="type > 0"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="remark"
                    >
                </el-input>
            </div>
        </div>
        <div class="role_detail_authorize flex flexR">
            <div class="left">
                授权:
            </div>
            <div class="right">
                <!-- node-key：每个树节点用来作为唯一标识的属性（即角色ID）、default-expanded-keys（默认展开的角色ID节点）、default-checked-keys（默认选中的角色ID节点） -->
                <el-tree
                    :data="permission_ids"
                    show-checkbox
                    node-key="permission_id"      
                    :default-expanded-keys="default_expanded_keys"
                    :default-checked-keys="default_checked_keys"
                    :props="defaultProps"
                    ref="tree"
                    >
                </el-tree>
            </div>
        </div>

         <!-- 新增、编辑的时候还有下面的按钮，用于提交数据 -->
        <el-row  class="el_input">
            <el-button type="primary" @click="submitRole" v-if="type != 0">保存</el-button>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "TerraceRoleDetail",
        props:{
            type:{              //类型；0：查看、1：新增、2：编辑
                type: Number,
                default: 1
            },
            role_id:{
                type: Number,
                default: 0
            },
            status:{            //状态： 0：正常、1：隐藏
                type: Number,
                default: 0
            },
            role_name:{         //角色名称
                type: String,
                default: ''
            },
            remark:{            //备注
                type: String,
                default: ''
            },
            permission_ids:{
                type: Array,
                default(){
                    return []
                }
            },
            default_checked_keys:{      //默认选中的角色ID数组
                type: Array,
                default(){
                    return  []
                }
            },
            default_expanded_keys:{     //将一、二级角色展开，角色ID数组
                type: Array,
                default(){
                    return  []
                }
            }
        },
        data(){
            return {     
                defaultProps: {
                    children: 'list',
                    label:'permission_name'
                },
                current_path: '',                //当前路由
            }
        },
        computed:{
            getNavList(){
                return  this.$store.state.showNavList;
            }
        },
        activated(){
            let flag = false;
            console.log('getnavlist', this.getNavList);
            console.log('current_path', this.current_path);
            for(let val of this.getNavList){
                if(val.path == this.current_path){
                    flag = true;
                }
            }
            if(!flag){
                this.$setRouteTitle();
            }
        },
        deactivated(){
            let flag = false;    //是否保留数据
            for(let val of this.getNavList){
                if(val.path == this.current_path){
                    flag = true;
                }
            }
/*  prop 中的属性不能直接修改，所以下面的写法其实没啥用
            if(!flag && this.type == 1){
                this.status = 0;    //状态： 0：正常、1：隐藏
                this.role_name = '';    //角色名称
                this.default_checked_keys = [];    //默认选中的角色ID数组
                this.default_expanded_keys = [];    //将一、二级角色展开，角色ID数组
            }
*/
        },
        mounted(){
            this.current_path = this.$route.path;
        },
        methods:{
            submitRole(){
                let post = {};
                post.status = this.status;
                post.admin_role_name = this.role_name;
                post.remark = this.remark;
                post.admin_permission_ids = this.$refs.tree.getCheckedKeys();
                if(this.role_id > 0)    post.role_id = this.role_id;
                if(this.role_name == ''){    //角色名称必填
                    this.$message.error('角色名称必填');
                }
                this.$emit('submitRole', post);
            }
        }

    }
</script>

<style lang="less" :scope="true" src="@/style/terrace/terrace_role/terrace_role_detail.less">

</style>